<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>睿乐GO商城</title>
    <link rel="stylesheet" href="../css/go.css">

</head>
<body>
    <div id="main">
        <!-- 导航栏上方红条 -->
        <div class="line"></div>
        <!-- 导航栏开始 -->
        <div class="header">
            <div class="header-in">
                <div class="logo">
                    <div class="logo-in"><img src="../images/logo.svg"></div>
                    <div class="content-wrapper">
                        <div class="left"><img src="../images/menu.svg"></div>
                        <span>产品分类</span>
                    </div>
                </div>
                <div class="content">
                    <div class="content-top">
                        <a href="" class="a-long"><span>我的账户</span></a>
                        <a href="" class="a-long"><span>我的收藏</span></a>
                        <a href="" class="a-long"><span>联系我们</span></a>
                        <a href="" class="a-short"><span>查看</span></a>
                        <a href="" class="a-short"><span>登录</span></a>
                        <div class="cart">
                            <a href="" class="cart-in">
                                <span>(0)</span>
                                <span class="cart-logo"><img src="../images/cart.svg"></span>
                                <span class="text">项目</span>
                            </a>
                        </div>
                    </div>
                    <div class="content-bottom">
                        <div class="nav">
                            <a href="">常见问题</a>
                            <a href="">关于我们</a>
                            <a href="">网页</a>
                            <a href="">联系我们</a>
                        </div>
                        <input type="text" class="search" placeholder="搜索你想要的产品"/>
                        <div class="search-logo"></div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 导航栏结束 -->


        <!-- 轮播图开始 -->
        <a href="" class="slideshow">
            <img src="../images/slide_1.png" alt="" />
            <div class="arrow">
                <span><-</span>
                <span>-></span>
            </div>
            <div class="dot">
                <span></span>
                <span></span>
                <span></span>
            </div>
        </a>
        <!-- 轮播图结束 -->

        <!-- 上下间隙 -->
        <div class="split"></div>


        <!-- 手机滑动列表开始 -->
        <div class="phone-wrapper">
            <div class="list">
                <div class="phone">
                    <div><img src="../images/vivo Y81s.jpg"></div>
                    <h1>vivo Y81s 刘海全面屏 3GB+32GB 香槟金 移动联通电信4G手机</h1>
                    <p class="content">vivo Y81s 刘海全面屏 3GB+32GB 香槟金 移动联通电信4G手机</p>
                    <p class="price">￥1000</p>
                    <div class="layer">
                        <div class="button-wrapper">
                            <div class="magifier"><img src="../images/magnifier.svg"></div>
                            <div class="cart"><img src="../images/cart.svg" alt=""></div>
                            <div class="heart"><img src="../images/heart.svg" alt=""></div>
                        </div>
                    </div>
                </div>
                <div class="phone">
                    <div><img src="../images/iPone XR.jpg"></div>
                    <h1>Apple iPhone XR (A2108) 128GB 黑色 移动联通电信4G手机 双卡双待</h1>
                    <p class="content">Apple iPhone XR (A2108) 128GB 黑色 移动联通电信4G手机 双卡双待</p>
                    <p class="price">￥6999</p>
                    <div class="layer">
                        <div class="button-wrapper">
                            <div class="magifier"><img src="../images/magnifier.svg"></div>
                            <div class="cart"><img src="../images/cart.svg" alt=""></div>
                            <div class="heart"><img src="../images/heart.svg" alt=""></div>
                        </div>
                    </div>
                </div>
                <div class="phone">
                    <div><img src="../images/OPPO R17.jpg"></div>
                    <h1>OPPO R17 2500万美颜拍照 6.4英寸水滴屏 光感屏幕指纹 6G+128G 流光蓝 全网通 移动联通电信4G 双卡双待手机</h1>
                    <p class="content">OPPO R17 2500万美颜拍照 6.4英寸水滴屏 光感屏幕指纹 6G+128G 流光蓝 全网通 移动联通电信4G 双卡双待手机</p>
                    <p class="price">￥2999</p>
                    <div class="layer">
                        <div class="button-wrapper">
                            <div class="magifier"><img src="../images/magnifier.svg"></div>
                            <div class="cart"><img src="../images/cart.svg" alt=""></div>
                            <div class="heart"><img src="../images/heart.svg" alt=""></div>
                        </div>
                    </div>
                </div>
                <div class="phone">
                    <div><img src="../images/PHILIPS.jpg"></div>
                    <h1>飞利浦 PHILIPS E256S 炫酷红 双屏翻盖 大屏大字 长待机 移动联通2G 双卡双待 老人手机 学生备用功能机</h1>
                    <p class="content">飞利浦 PHILIPS E256S 炫酷红 双屏翻盖 大屏大字 长待机 移动联通2G 双卡双待 老人手机 学生备用功能机</p>
                    <p class="price">￥299</p>
                    <div class="layer">
                        <div class="button-wrapper">
                            <div class="magifier"><img src="../images/magnifier.svg"></div>
                            <div class="cart"><img src="../images/cart.svg" alt=""></div>
                            <div class="heart"><img src="../images/heart.svg" alt=""></div>
                        </div>
                    </div>
                </div>
            </div>
            
        </div>
        <!-- 手机滑动列表结束 -->


        <!-- 上下间隙 -->
        <div class="split"></div>


        <!-- 笔记本滑动列表开始 -->
        <a href="" class="book">
            <img src="../images/matebook.png" alt="">
            <span></span>
            <span></span>
        </a>
        <!-- 笔记本滑动列表结束 -->


        <!-- 上下间隙 -->
        <div class="split"></div>


        <!-- 热卖单品开始 -->
        <h1 class="hot-title">热卖单品</h1>
        <div class="hot">
            <a href="" class="hot-wrapper"><img src="../images/hotoppo.png" alt=""></a>
            <div class="hot-right">
                <a href="" class="top"><img src="../images/hothonner.png" alt=""></a>
                <span class="bottom">
                    <a href=""><img src="../images/hotphonex.png" alt=""></a>
                    <a href=""><img src="../images/hotmi.png" alt=""></a>
                </span>
            </div>
        </div>
        <!-- 热卖单品结束 -->


        <!-- 上下间隙 -->
        <div class="split"></div>


        <!-- 横幅手机开始 -->
        <a href="" class="footerbanner">
            <img src="../images/footerbanner.png" alt="">
        </a>
        <!-- 横幅手机结束 -->


        <!-- 上下间隙 -->
        <div class="split"></div>


        <!-- 手机 笔记本 平板 配件 开始 -->
        <div class="list">
            <h1>手机</h1>
            <h1>笔记本</h1>
            <h1>平板</h1>
            <h1>配件</h1>
        </div>
        <div class="list-wrapper">
            <div class="row">
                <div class="item">
                    <a href=""><img src="../images/list.jpg" alt=""></a>
                    <h1>小米MAX3</h1>
                    <p class="content">搭建想象的翅膀，任由飞翔</p>
                    <p class="price">$299</p>
                </div>
                <div class="item">
                    <a href=""><img src="../images/list.jpg" alt=""></a>
                    <h1>小米MAX3</h1>
                    <p class="content">搭建想象的翅膀，任由飞翔</p>
                    <p class="price">$299</p>
                </div>
                <div class="item">
                    <a href=""><img src="../images/list.jpg" alt=""></a>
                    <h1>小米MAX3</h1>
                    <p class="content">搭建想象的翅膀，任由飞翔</p>
                    <p class="price">$299</p>
                </div>
                <div class="item">
                    <a href=""><img src="../images/list.jpg" alt=""></a>
                    <h1>小米MAX3</h1>
                    <p class="content">搭建想象的翅膀，任由飞翔</p>
                    <p class="price">$299</p>
                </div>
            </div>
            <div class="row">
                <div class="item">
                    <a href=""><img src="../images/list.jpg" alt=""></a>
                    <h1>小米MAX3</h1>
                    <p class="content">搭建想象的翅膀，任由飞翔</p>
                    <p class="price">$299</p>
                </div>
                <div class="item">
                    <a href=""><img src="../images/list.jpg" alt=""></a>
                    <h1>小米MAX3</h1>
                    <p class="content">搭建想象的翅膀，任由飞翔</p>
                    <p class="price">$299</p>
                </div>
                <div class="item">
                    <a href=""><img src="../images/list.jpg" alt=""></a>
                    <h1>小米MAX3</h1>
                    <p class="content">搭建想象的翅膀，任由飞翔</p>
                    <p class="price">$299</p>
                </div>
                <div class="item">
                    <a href=""><img src="../images/list.jpg" alt=""></a>
                    <h1>小米MAX3</h1>
                    <p class="content">搭建想象的翅膀，任由飞翔</p>
                    <p class="price">$299</p>
                </div>
            </div>
            
        </div>
        <!-- 手机 笔记本 平板 配件 结束 -->


        <!-- 尾部部分开始 -->
        <div class="footer">
            <div class="foot-in">
                <div class="communication-cn">实时通讯</div>
                <div class="communication-en">Phasellus lacinia fermentum bibendum. Interdum et malesuada fames ac ante ipsumien lacus, eu posuere odi</div>
                <div class="input">
                    <input type="text" class="input-main" placeholder="请输入您的邮箱地址">
                    <div class="input-button">
                        <span>寄给我</span>
                    </div>
                </div>
            </div>
        </div>
        <!-- 尾部部分结束 -->

    </div>
    
</body>
</html>